<template>
    <v-form-designer ref="vfDesigner"></v-form-designer>
    <footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
    </footer>
</template>
<script setup>
import request from '@/request';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue';
const route = useRoute();
const id = route.query.id;
const vfDesigner = ref(null)

onMounted(async () => {
    await getTemplateForm();
})
const getTemplateForm = async () => {
    let params = {
        id: id
    }
    const res = await request.get('/api/master/template/details', params);
    if (res.code == 1) {
        vfDesigner.value.setFormJson(res.data.content)
    }
}
const cancel = () => {
    ElMessageBox.alert('确定取消该模板?将回到初始设定', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback:async (action) => {
            if (action == 'confirm') {
                await getTemplateForm();
                ElMessage.success('取消成功')
            }
        },
    })
}
const submit = async () => {
    ElMessageBox.alert('确定保存该模板', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: (action) => {
            if (action == 'confirm') {
                saveTemplateForm(); 
            }
        },
    })
}
const saveTemplateForm = async () => {
    let formJson = vfDesigner.value.getFormJson()
    let params = {
        id: id,
        content: JSON.stringify(formJson)
    }
    const res = await request.post('/api/master/template/save', params);
    if (res.code == 1) {
        ElMessage.success('保存成功') 
    }
}
</script>
<style>
.main-header {
    display: none;
}
</style>
<style lang="less" scoped>
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    box-shadow: 0px 0px 11px 0px rgba(70, 70, 163, 0.24);
}
</style>